<template>
	<div>
		<div class="team-box u-skeleton-fillet">
			<div class="pet-flex title-box" :style="{marginBottom:marginBottom+'vw'}">
				<div>
					<span class="pet-font16-black">超值拼团</span>
					<span class="iconfont icon-pintuan"></span>
					<span class="h2">拼着买更实惠</span>
				</div>
				<div @click="toTeam('pintuan')">
					<span class="all-text">全部</span>
					<span class="iconfont icon-jinru2"></span>
				</div>
			</div>
			<!-- 样式一 -->
			<block v-if="teamShow == 1">
				<div class="pet-flex-between" @click="toDetails(1, 'pintuan')">
					<div class="box-img">
						<image src="/static/img/posters.png" mode="aspectFill"></u-image>
					</div>
					<!-- 图片右侧详情 -->
					<div class="box-right">
						<h5 class="h2">欧式将军罐摆件陶瓷配铜储物欧式将军罐摆件陶瓷配铜储物</h5>
						<span class="text">“开始”作品表达每个人一开始都是不同的，都是特殊的存在...</span>
						<div class="line">
							<div class="line-color"></div>
						</div>
						<div class="number">
							<p class="people">2000人成团</p>
							<p class="digital">58%</p>
						</div>
						<div class="money">
							<p class="money-flex">
								<span class="li-money-font24">￥<label class="li-money-font32">1,988.00</label></span>
								<span class="li-money-bbb">￥<label>625.00</label></span>
							</p>
							<div class="money-bt">
								<span class="pet-font10-time ">限时秒杀</span>
								<span class="pet-font10-time left">3折</span>
							</div>
						</div>
						
					</div>
				</div>
			</block>
			<block v-else-if="teamShow == 2">
				<scroll-view class="scroll-view" :scroll-x="true">
					<div class="scroll">
						<div v-for="item in 6" class="mar">
							<div class="box-img">
								<image src="/static/img/posters.png" mode="aspectFill"></image>
								<div class="line">
									<div class="line-color"></div>
								</div>
							</div>
							<p class="title">C/MEO COLLECT...</p>
							<p class="text">Rose of No Man's...</p>
							<p class="money">
								<label><span>￥</span>431</label>
								<label>￥625.00</label>
							</p>
							<p>
								<span class="pet-font10-time">限时秒杀</span>
								<span class="pet-font10-time left">3折</span>
							</p>
						</div>
						<!-- <div class="all">
							<div class="pd-50">
								<span class="all-text">查</span>
								<span class="all-text">看</span>
								<span class="all-text">所</span>
								<span class="all-text">有</span>
								<span class="iconfont icon-jinru"></span>
							</div>
						</div> -->
					</div>
				</scroll-view>
			</block>
			<block v-else-if="teamShow == 3">
				<div class='teamThree-box'>
					<div class="big-box" v-for="item in 4">
						<div class="box-img">
							<image src="/static/img/posters.png" mode="aspectFill"></image>
							<div class="line">
								<div class="line-color"></div>
							</div>
						</div>
						<p class="title">C/MEO COLLECTION...</p>
						<p class="text">Rose of No Man's...</p>
						<p class="money">
							<label><span>￥</span>431</label>
							<label>￥625.00</label>
						</p>
						<p>
							<span class="pet-font10-time">限时秒杀</span>
							<span class="pet-font10-time left">3折</span>
						</p>
					</div>
				</div>
			</block>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			teamShow:{
				type:Number,
				default:1
			}
		},
		data(){
			return{
				marginBottom:4.27,
			}
		},
		computed:{
			titleBox(){
				if(this.teamShow === 3){
					this.marginBottom=0
				}
			}
		}
	}
</script>

<style lang="scss">
	.pet-flex {
		display: flex;
	}
	
	.title-box {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 4.27vw;
		// padding: 0 4.27vw;
	
		.icon-xianshi {
			margin-left: 2.67vw;
			color: #D2AD87;
			position: relative;
			top: 0.38vw;
		}
	
		.h2 {
			color: #000;
			font-size: 3.2vw;
			font-weight: Light;
			margin-left: 0.8vw;
		}
	
		.title {
			font-size: 4.27vw;
			color: #232323;
			font-weight: Medium;
		}
	
		.icon-jinru2 {
			width: 2.13vw;
			height: 1.99vw;
			color: #efefef;
			font-weight: bold;
			margin: 0;
			position: relative;
			top: 0.39vw;
		}
	}
	
	.pet-font10-time {
		border: 1px solid #D2AD87;
		border-radius: 0.53vw;
		padding: 0.27vw 1.07vw;
		font-size: 2.67vw;
		color: #D2AD87;
	}
	
	.left {
		margin-left: 1.07vw;
	}
	
	.team-box {
		background-color: #FFFFFF;
		border-bottom: 0.27vw solid #F8F8F8;
		padding: 6.4vw 0vw 6.4vw 4.27vw;
		
		.all-text{
			color: #bbbbbb;
			font-size: 3.2vw;
		}
	
		// 顶部文字
		.title-box {
			justify-content: space-between;
			// margin-bottom: 4.27vw;
			padding-right: 4.27vw;
	
			.icon-pintuan {
				margin-left: 2.67vw;
				color: #D2AD87;
				position: relative;
				top: 0.38vw;
			}
	
			.h2 {
				color: #767676;
				font-size: 3.2vw;
				margin-left: 0.8vw;
			}
		}
	
		// 外层最大的弹性盒子
		.pet-flex-between {
			display: flex;
			justify-content: space-between;
			padding-right: 4.27vw;
	
			.box-img {
				width: 32vw;
				height: 42.67vw;
				margin-right: 4.27vw;
				// margin-bottom: 6.67vw;
				
				image{
					width: 32vw;
					height: 42.67vw;
					border-radius: 2.13vw;
				}
			}
	
			.box-right {
				display: flex;
				flex-direction: column;
	
				.h2 {
					font-size: 3.73vw;
					color: #181818 100%;
					font-weight: bold;
					width: 55.2vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
	
				.text {
					font-size: 3.2vw;
					color: #BBBBBB;
					font-weight: Light;
					margin-right: 4.27vw;
					margin-top: 1.07vw;
				}
	
				.line {
					display: block;
					margin-top: 4.27vw;
					width: 55.2vw;
					height: 1.07vw;
					background: #EFEFEF;
					border-radius: 1vw;
	
					.line-color {
						width: 30.13vw;
						height: 1.07vw;
						background: linear-gradient(270deg, #D2AD87 0%, #FFF1E3 100%);
						border-radius: 1vw;
					}
				}
	
				.number {
					display: flex;
					justify-content: space-between;
					margin-top: 1.07vw;
	
					.people {
						color: #BBBBBB;
						font-size: 3.2vw;
						font-weight: Light;
					}
	
					.digital {
						color: #d2ad87;
						font-size: 3.2vw;
					}
				}
	
				.money {
					flex: 1;
					display: flex;
					// margin-top: 3.66vw;
					flex-direction: column;
	
					.money-flex {
						display: flex;
						align-items: flex-end;
						flex: 1;
					}
	
					.space {
						text-decoration: line-through;
						margin-left: 1.07vw;
					}
	
					.money-bt {
						// flex: 1;
						display: flex;
						align-items: flex-end;
						margin-top: 1.3vw;
					}
				}
			}
		}
	}

	.scroll-view {
		width: 100%;
	
		.scroll {
			padding: 0;
			display: flex;
			padding-bottom: 1vw;
	
			.mar {
				margin-right: 2.13vw;
			}
	
			.box-img {
				height: 42.67vw;
	
				image {
					width: 32vw;
					height: 42.67vw;
					border-radius: 2.13vw;
				}
	
				.line {
					display: block;
					margin-top: 4.27vw;
					width: 27.73vw;
					height: 1.07vw;
					background: #EFEFEF;
					border-radius: 1vw;
					position: relative;
					bottom: 8vw;
					left: 2vw;
	
					.line-color {
						width: 18.4vw;
						height: 1.07vw;
						background: linear-gradient(270deg, #D2AD87 0%, #FFF1E3 100%);
						border-radius: 1vw;
					}
				}
			}
	
			.title {
				font-size: 3.2vw;
				font-weight: bold;
				color: #181818;
			}
	
			.text {
				color: #000000;
				font-size: 3.2vw;
				font-weight: Light;
			}
	
			.money {
				margin-top: 1.07vw;
				font-size: 3.73vw;
				color: #181818;
				font-weight: 500;
	
				span {
					font-size: 3.2vw;
				}
	
				label:nth-child(2) {
					text-decoration: line-through;
					color: #BBBBBB;
					font-size: 2.67vw;
					margin-left: 1.07vw;
					font-weight: Light;
				}
			}
	
			.all {
				height: 65.6vw;
				width: 12.8vw;
				background-color: #F8F8F8;
				border-radius: 2.13vw;
				display: flex;
				flex-direction: column;
				border-radius: 2.13vw;
	
				.pd-50 {
					padding-top: 20.53vw;
	
					.all-text {
						display: flex;
						justify-content: center;
						align-items: center;
						color: #181818;
						font-size: 3.2vw;
						font-weight: bold;
					}
	
					.icon-jinru {
						margin-top: 2.13vw;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #BBBBBB;
						font-size: 4vw;
						font-weight: bold;
					}
				}
			}
		}
	}

	.teamThree-box {
		background-color: #fff;
		// border-bottom: 0.27vw solid #F8F8F8;
		// border-top: 0.27vw solid #F8F8F8;
		// padding: 0vw 0vw 4.27vw 4.27vw;
	
		.title-box {
			justify-content: space-between;
			padding-right: 4.27vw;
	
			.icon-xianshi {
				margin-left: 2.67vw;
				color: #D2AD87;
				position: relative;
				top: 0.38vw;
			}
	
			.h2 {
				color: #767;
				font-size: 2.67vw;
				font-weight: Light;
				margin-left: 0.8vw;
			}
	
			.title {
				font-size: 4.27vw;
				color: #232323;
				font-weight: Medium;
			}
	
			.icon-jinru2 {
				width: 2.13vw;
				height: 1.99vw;
				color: #efefef;
				font-weight: bold;
				margin: 0;
				position: relative;
				top: 0.39vw;
			}
		}
	
		.big-box {
			display: inline-block;
			justify-content: space-between;
			margin-right: 2.93vw;
			margin-top: 4.27vw;
	
			.box-img {
				height: 58.93vw;
	
				image {
					width: 44.27vw;
					height: 58.93vw;
					border-radius: 2.13vw;
				}
	
				.line {
					display: block;
					margin-top: 4.27vw;
					width: 27.73vw;
					height: 1.07vw;
					background: #EFEFEF;
					border-radius: 1vw;
					position: relative;
					bottom: 8vw;
					left: 2vw;
	
					.line-color {
						width: 18.4vw;
						height: 1.07vw;
						background: linear-gradient(270deg, #D2AD87 0%, #FFF1E3 100%);
						border-radius: 1vw;
					}
				}
			}
	
			.title {
				color: #181818;
				font-size: 3.73vw;
				font-weight: bold;
				margin-top: 2.13vw;
			}
	
			.text {
				color: #000000;
				font-size: 3.2vw;
				font-weight: Light;
			}
	
			.money {
				margin-top: 2.13vw;
				color: #181818;
				font-size: 3.73vw;
				font-weight: 500;
	
				span:nth-child(1) {
					font-size: 3.2vw;
				}
	
				label:nth-child(2) {
					font-size: 2.67vw;
					color: #BBBBBB;
					font-weight: Light;
					text-decoration: line-through;
					margin-left: 1.07vw;
				}
			}
		}
	}
</style>
